<template>
    <div>
        <van-nav-bar title="购物车" left-text="返回" left-arrow @click-left="() => { { $router.back('/') } }" />

        <div v-for="item in cartsj">
            <van-swipe-cell>
                <van-card :price="item.goods.goods_price" :title="item.goods.goods_name">
                    <template #thumb>
                        <van-checkbox v-model="item.checked"></van-checkbox>

                        <img style="width: 70px;height: 70px;"
                            :src="item.goods.goods_big_logo ? item.goods.goods_big_logo : 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg'"
                            alt="">
                    </template>
                    <template #footer>
                        <van-stepper v-model="item.number" theme="round" button-size="22" disable-input />
                    </template>
                </van-card>
                <template #right>
                    <van-button square type="danger" text="删除" @click="detdata(item.id)" />
                </template>
            </van-swipe-cell>
            <van-submit-bar :price="allprice" button-text="提交订单" @submit="onSubmit">
                <van-checkbox v-model="checked">全选</van-checkbox>
            </van-submit-bar>
        </div>


    </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import { useCounterStore } from '@/stores/cart.js'
// 可以在组件中的任意位置访问 `store` 变量 ✨
const store = useCounterStore()
let cartsj = ref([])
function cartshop() {
    let username = localStorage.getItem('username')
    cartsj.value = store.carts.filter(item => item.username == username)
}
cartshop()

const detdata = (id) => {
    store.carts = store.carts.filter(item => item.id !== id)
    cartshop()
}

const checked = computed({
    get() {
        if (cartsj.value.length == 0) {
            return false
        }
        else {
            return cartsj.value.every(item => item.checked)
        }
    },
    set(val) {
        console.log(val);
        cartsj.value.forEach(item => item.checked = val)


    }
})

const allprice = computed(() => {
    let allprice = ref(0)
    let okcart = cartsj.value.filter(item => item.checked)
    okcart.forEach(item => {
        allprice.value += item.number * item.goods.goods_price
    })
    return allprice.value * 100
})

import { createApi } from '@/api/api'
import { useRouter } from 'vue-router'
const router=useRouter()
import { showToast } from 'vant';
const onSubmit = () => {
    let okcart = cartsj.value.filter(item => item.checked)
    if (okcart.length == 0) {
        showToast({
            message: '自定义图标',
            icon: 'like-o',
          
        });
    }
    else{
        createApi({
            goodsIds:cartsj.value.map(item=>item.goods.goods_id).join(','),
            username:localStorage.getItem('username'),
            product_code:okcart[0].goods.goods_name,
            totalPrice:allprice.value,
            nums:cartsj.value.map(item=>item.number).join(','),
           
        }).then(res=>{
            console.log('生成订单',res);
           router.push('/ddetail/'+res.data.data.orderId)
        })
    }
}
</script>

<style lang="scss" scoped></style>